<template>
  <div class="panel">
    <div class="head">
      <span>{{ panel.title }}</span>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  panel: {
    type: Object,
    default: {}
  }
})

</script>

<style  lang="scss" scoped>
.panel {
  // position: absolute; // 因为这个样式属性, 让循环不起作用, 始终只有一个图表, 其他被压盖住了
  display: flex;
  flex-direction: column;
  z-index: 999;

  .head {
    width: 100%;
    height: 45px;
    background: url('../assets/uiResources/panel-header.png');
    background-size: cover;
    font-family: '等线Bold';
    letter-spacing: 1px;

    span {
      display: inline-block;
      font-size: 21px;
      background: rgb(255, 255, 255);
      background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 9%, rgba(211, 156, 50, 1) 57%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      height: 100%;
      line-height: 45px;
      margin-left: 38px;
      margin-top: 2px;
    }
  }

  .content {
    width: 100%;
    flex: 1;
    background: url('../assets/uiResources/panel-content.png');
    background-size: 100% 100%;
    pointer-events: all;
    background-color: rgba(0, 0, 0, .4);
  }
}
</style>